<template>
  <el-dialog
    title="日志详情"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :fullscreen="true"
    :visible.sync="visible"
    width="75%">
    <table
      class="el-table el-table--fit el-table--border el-table--enable-row-transition el-table--medium el-table__body">
      <tr class="el-table__row">
        <td>日志id</td>
        <td>{{ jobLogEntity.id }}</td>
        <td>任务id</td>
        <td>{{ jobLogEntity.jobId }}</td>
        <td>jobDesc</td>
        <td>{{ jobLogEntity.jobDesc }}</td>
      </tr>
      <tr class="el-table__row">
        <td>执行器地址</td>
        <td>{{ jobLogEntity.executorAddress }}</td>
        <td>执行器任务handler</td>
        <td>{{ jobLogEntity.executorHandler }}</td>
        <td>执行器任务参数</td>
        <td>{{jobLogEntity.executorParam}}</td>
      </tr>
      <tr class="el-table__row">
        <td>调度-时间</td>
        <td >{{jobLogEntity.triggerTime}}</td>
        <td>调度-结果</td>
        <td>{{jobLogEntity.triggerCode}}</td>
        <td>调度-日志</td>
        <td v-html="jobLogEntity.triggerMsg"></td>
      </tr>
      <tr class="el-table__row">
        <td>执行-时间</td>
        <td >{{jobLogEntity.handleTime}}</td>
        <td>执行-状态</td>
        <td>{{jobLogEntity.handleCode}}</td>
        <td>执行-日志</td>
        <td v-html="jobLogEntity.handleMsg"></td>
      </tr>
    </table>
    <section class="log-content">
      <pre class="log-content-pre">
          <div v-html="logContent"></div>
      </pre>
    </section>
  </el-dialog>
</template>
<style>
  .log-content {
    line-height: 14px !important;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #eee;
    height: 600px;
    overflow-y: auto;
  }

  .log-content-pre {
    font-size: 12px;
    position: relative;
    margin: 0;
  }
</style>
<script>
  export default {
    data() {
      return {
        fromLineNum: 0,
        visible: false,
        pullFailCount: 0,
        jobLogEntity: {},
        logRun: 0,
        logId: '',
        logContent: ''
      }
    },
    methods: {
      init(id) {
        this.logContent = ""
        this.fromLineNum = 0
        this.pullFailCount = 0
        this.logId = id
        this.visible = true
        this.jobLogEntity = {}
        const $this = this
        this.$http({
          url: this.$http.adornUrl("/framework/xxljob/joblog/logDetail" ),
          method: "get",
          params : this.$http.adornParams({
            'id': this.logId
          })
        }).then(({data}) => {
          if (data && data.status === 1) {
            this.jobLogEntity = data.content;
          }
          this.pullLog()
          this.logRun = setInterval(function () {
            $this.pullLog()
          }, 3000);
        })
      },
      pullLog() {
        console.log(typeof (this.jobLogEntity.triggerTime))
        if (this.pullFailCount++ > 200) {
          this.logRunStop('<span style="color: red;">终止请求Rolling日志,请求失败次数超上限,可刷新页面重新加载日志</span>');
          return;
        }
        // load
        console.log("pullLog, fromLineNum:" + this.fromLineNum);
        this.$http({
          url: this.$http.adornUrl("/framework/xxljob/joblog/logDetailCat"),
          method: "get",
          params: this.$http.adornParams({
            executorAddress: this.jobLogEntity.executorAddress,
            logId: this.logId,
            fromLineNum: this.fromLineNum
          })
        }).then(({data}) => {
          if (data && data.status === 1) {
            if (!data.content) {
              console.log('pullLog fail');
              return;
            }
            if (this.fromLineNum != data.content.fromLineNum) {
              console.log('pullLog fromLineNum not match');
              return;
            }
            if (this.fromLineNum > data.content.toLineNum) {
              console.log('pullLog already line-end');

              // valid end
              if (data.content.end) {
                this.logRunStop('<br><span style="color: green;">[Rolling Log Finish]</span>');
                return;
              }

              return;
            }

            // append content
            this.fromLineNum = data.content.toLineNum + 1;
            this.logContent = this.logContent + data.content.logContent
            this.pullFailCount = 0;

            // scroll to bottom
            scrollTo(0, document.body.scrollHeight);        // $('#logConsolePre').scrollTop( document.body.scrollHeight + 300 );

          } else {
            this.logRunStop('<span style="color: red;">'+data.msg+'</span>');

          }
        })
      },
      logRunStop(content) {
        this.logRun = window.clearInterval(this.logRun);
        if (content) {
          this.logContent = this.logContent + content
        }
      },
      handleClose(done) {
        this.logRunStop()
        done();
      }
    }
  }
</script>

<style scoped>

</style>
